<template>
  <div>
<!--    <div class="applist-create">-->
<!--      <el-button type="primary" plain style="width:124px;height:40px" @click="createApp">创建店铺</el-button>-->
<!--    </div>-->
    <div>
      <el-card :body-style="{ padding: '0' }" class="applist-card" shadow="hover" v-for="item in appList" :key="item.saa_key">
        <div style="padding:10px 20px" @click="selectApp(item)">
          <div class="card-top">
            <div class="card-pic-box">
              <img :src="item.saa_pic_url" style="width:60px;height:60px;border-radius:5px">
            </div>
            <div class="card-text">
              <div class="card-text-name">{{ item.saa_name }}</div>
              <div class="card-text-appname">{{ item.app_name }}</div>
            </div>
          </div>
<!--          <div class="card-bottom">-->
<!--            <span>到期日期：</span>-->
<!--            <span>{{ item.expire_time }}</span>-->
<!--          </div>-->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'applist',
  computed: {
    appList() {
      return this.$store.state.app.merchantApp
    }
  },
  async mounted() {
    await this.$store.dispatch('app/setMerchantApp')
  },
  methods: {
    selectApp(app) {
      this.$store.dispatch('app/SetActiveApp',app)
      this.$router.push({ path: '/dashboard' })
    },
    // createApp(){
    //   this.$router.push({ path: '/appinfo' })
    // }
  },
}
</script>

<style lang="css" scoped>
.applist-create{
  padding: 70px 0
}
.applist-card{
  width: 240px;
  height: 140px;
  margin: 20px 15px;
  display: inline-block;
  /* border: 1px solid #ACD5AC; */
  border-radius: 5px;
  cursor: pointer;
}
.card-top{
  height: 80px;
  line-height: 80px;
  padding: 10px 0;
  margin-bottom: 10px;
}
.card-top>div{
  display: inline-block;
}
.card-bottom{
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #c0c4cc;
}
.card-pic-box{
  height: 60px;
  width: 60px;
  border-radius: 5px;
  background-color: #ACD5AC;
}
.card-text{
  width: 108px;
  padding: 5px 10px;
  line-height: 60px;
}
.card-text-name{
  height: 30px;
  line-height: 30px;
  margin-bottom: 15px;
  font-size: 20px;
  white-space: nowrap;
  color: #3a8ee6;
}
.card-text-appname{
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  margin-bottom: 5px;
  color: #606266;
}
</style>
